<template>
  <div class="bdc-introduced hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar
        :title="t('bdcjs.pageTitle')"
        isTransparent
        :navScorllOffset="60"
        navScorllColor="#FFF"
        :scrollEl="scrollEl"
        isFixed
      />

      <!-- 头部 -->
      <div class="header">
        <img
          v-if="imgUrl.headerBg"
          class="header-bg"
          src="/image/mvp/coin/bdc-introduced-bg.png"
        />
        <div class="header-text">{{ t("bdcjs.smsbdc") }}</div>
      </div>
      <div style="position: relative; z-index: 9;">
        <!-- 第一段 -->
        <div class="content-box mb10">
          <div class="text-zw text-oneline">{{ t("bdcjs.text") }}</div>
          <div class="text-zw text-oneline">{{ t("bdcjs.xmjs_desc1") }}</div>
          <div class="text-zw text-oneline">{{ t("bdcjs.xmjs_desc2") }}</div>
          <div class="text-zw">{{ t("bdcjs.xmjs_desc3") }}</div>
        </div>
        <!-- 微型手交易 -->
        <div class="content-box mb10">
          <GroupTitle class="text-title-padding mb10" src="papger-wallet.svg">{{
            t("paper.xmjs_title1")
          }}</GroupTitle>
          <div class="text-zw">{{ t("bdcjs.xmjs_micro") }}</div>
        </div>
        <!-- 超快速执行 -->
        <div class="content-box mb10">
          <GroupTitle class="text-title-padding mb10" src="papger-fast.svg">{{
            t("paper.xmjs_title2")
          }}</GroupTitle>
          <div class="text-zw">{{ t("bdcjs.xmjs_title2_desc") }}</div>
        </div>
        <!-- 交易工具 -->
        <div class="content-box mb10">
          <GroupTitle class="text-title-padding mb10" src="papger-seting.svg">{{
            t("paper.xmjs_title3")
          }}</GroupTitle>
          <div class="text-zw">{{ t("bdcjs.xmjs_title3_desc") }}</div>
        </div>
        <!-- 资质与牌照 -->
        <div class="content-box mb10">
          <GroupTitle class="text-title-padding mb10" src="papger-rz.svg">{{
            t("paper.xmjs_title4")
          }}</GroupTitle>
          <div class="text-zw text-oneline">
            {{ t("bdcjs.xmjs_title4_desc") }}
          </div>
          <div class="text-zw">{{ t("bdcjs.xmjs_title4_desc1") }}</div>
        </div>
        <!-- Secured Funding Methods -->
        <div class="content-box">
          <GroupTitle
            class="text-title-padding mb10"
            src="papger-probability.svg"
            >{{ t("paper.xmjs_title5") }}</GroupTitle
          >
          <div class="text-zw text-oneline">
            {{ t("bdcjs.xmjs_title5_desc") }}
          </div>
          <div class="text-zw text-oneline">
            {{ t("bdcjs.xmjs_title5_desc1") }}
          </div>
          <div class="text-zw">{{ t("bdcjs.xmjs_title5_desc2") }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="bdcIntroduced">
import { getOssFileUrl } from "@/utils";
import GroupTitle from "../../../components/mvp/paper/group-title.vue";
const { t } = useI18n();
const imgUrl = getOssFileUrl({
  headerBg: "/image/mvp/coin/bdc-introduced-bg.png",
});

const scrollEl = ref();

// firebase埋点
// const firebase = useInitFirebase(); // 初始化firebase
// firebase?.logEvent('BDC_H5_FAQJump');

onMounted(() => {});
</script>
<style lang="scss" scoped>
.bdc-introduced {
  position: relative;
  background-color: #edf6ff;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;

  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;

  .content {
    background: linear-gradient(
      180deg,
      #e5f1ff 0%,
      rgba(236, 245, 255, 0) 100%
    );

    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;

    .header {
      position: relative;
      height: 124 * 2px;

      &-bg {
        position: absolute;
        width: 100vw;
        z-index: 1;
      }
      &-text {
        margin-left: 25 * 2px;
        font-size: 24 * 2px;
        font-weight: 700;
        padding-top: 64 * 2px;
        color: #007bff;
      }
    }

    &-box {
      border-radius: 12 * 2px;
      background-color: #fff;
      margin: 0 15 * 2px;
      padding: 15 * 2px;
    }
  }

  .text {
    &-zw {
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
    }
    &-oneline {
      margin-bottom: 18 * 2px;
    }
  }

  .mb10 {
    margin-bottom: 10 * 2px !important;
  }
}
</style>
